<template>
  <div class="tab-pane"
    :class="{'active': active}"
    v-show="active">
    <div class="copy">
      <div class="copy-icon" @click="handleCopy">
        <svg t="1651771922277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1716" width="20" height="20">
          <path d="M606.5 191.66666667h-31.5v157.5h157.5v-31.5H606.5z" p-id="1717" fill="#ffffff"></path>
          <path d="M648.434375 128.66666667H323v94.5h-94.5v661.5h472.5v-94.5h94.5V276.32291667L648.434375 128.66666667zM669.5 853.16666667H260V254.66666667h63v535.5h346.5v63z m94.5-94.5H354.5V160.16666667h280.940625L764 289.31666667V758.66666667z" p-id="1718" fill="#ffffff"></path>
        </svg>
      </div>
    </div>
    <div ref="content" class="tab-pane--content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TabPane',
  props: {
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  computed: {
    active() {
      return this.$parent.currentName === this.name;
    }
  },
  methods: {
    handleCopy() {
      const content = this.$refs.content;
      const code = content.querySelector('pre');
      code.setAttribute('contenteditable', 'true');
      code.focus();
      document.execCommand('selectAll', false, null);
      document.execCommand('copy');
      code.removeAttribute('contenteditable');
    },
  },
};
</script>

<style lang='stylus'>
.tab-pane
  position: relative
  >div
    border-radius: 0

    >pre
      margin: 0 !important
      border-radius: 0 !important
.copy
  position: absolute
  top: -18px
  z-index: 2
  width: 100%
  padding: 10px 10px 0
  text-align: right
.copy-icon
  cursor: pointer
</style>
